import "./index.scss";
import { Table, Form, Input, Button, Select } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";

const data: DataType[] = [
	{
		key: "1",
		name: "王大锤",
		money: "6000",
		stack: "vue",
		degree: "一本",
		phone: "132132132132",
		authority: "关门地址",
	},
	{
		key: "2",
		name: "王大锤",
		money: "6000",
		stack: "vue",
		degree: "一本",
		phone: "132132132132",
		authority: "关门地址",
	},
	{
		key: "3",
		name: "王大锤",
		money: "6000",
		stack: "vue",
		degree: "一本",
		phone: "132132132132",
		authority: "关门地址",
	},
];
interface DataType {
	key: string;
	name: string;
	money: string;
	stack: string;
	degree: string;
	phone: string;
	authority: string;
}

type FieldType = {
	name?: string;
	type?: string;
};

const columns: TableProps<DataType>["columns"] = [
	{
		title: "序号",
		dataIndex: "key",
		key: "key",
	},
	{
		title: "花名",
		dataIndex: "name",
		key: "name",
	},
	{
		title: "当前薪资",
		dataIndex: "money",
		key: "money",
	},
	{
		title: "技术栈",
		key: "stack",
		dataIndex: "stack",
	},
	{
		title: "学历",
		key: "degree",
		dataIndex: "degree",
	},
	{
		title: "手机号",
		key: "phone",
		dataIndex: "phone",
	},
	{
		title: "课程权限",
		key: "authority",
		dataIndex: "authority",
	},
	{
		title: "操作",
		key: "action",
		render: () => <div className="del">删除</div>,
	},
];
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
	console.log("Success:", values);
};
const handleChange = (value: string) => {
	console.log(`selected ${value}`);
};
function StudentManage() {
	return (
		<div className="examHistory_wrap">
			<div className="examHistory_form">
				<Form layout="inline" onFinish={onFinish}>
					<Form.Item<FieldType>
						name="name"
						rules={[{ required: true, message: "请输入学员花名!" }]}
					>
						<Input placeholder="请输入学员花名" />
					</Form.Item>

					<Form.Item<FieldType>
						name="type"
						rules={[{ required: true, message: "请选择课程!" }]}
					>
						<Select
							placeholder="请选择课程"
							style={{ width: 180 }}
							onChange={handleChange}
							options={[
								{ value: "jack", label: "Jack" },
								{ value: "lucy", label: "Lucy" },
								{ value: "Yiminghe", label: "yiminghe" },
							]}
						/>
					</Form.Item>

					<Form.Item wrapperCol={{ offset: 2, span: 22 }}>
						<Button type="primary" htmlType="submit">
							查询
						</Button>
					</Form.Item>
				</Form>
			</div>
			<Table columns={columns} dataSource={data} />
		</div>
	);
}

export default StudentManage;
